<template>
  <div class="mydata">
    <div class="mydata-nav-box" >
      <van-nav-bar
        left-arrow
        left-text="返回"
        title="个人资料"
        @click-left="
          back();
        "
      />
    </div>
    <!-- 背景 -->
    <div class="mydata-img">
    <!-- <div class="mydata-img" :style="{ backgroundImage: `url(${userImage.userBg})` }"> -->
      <!-- <van-uploader class="uploader-box" :after-read="uploadBg" /> -->
    </div>
    <!-- 个人信息 -->
    <div class="mydata-box">
      <div class="mydata-conent">
        <div class="item">
          <div class="item-title">头像</div>
          <div
            class="item-value pic"
            :style="{ backgroundImage: `url(${AccountData.userImg})` }"
          >
            <van-uploader class="uploader" :after-read="updateImg" />
          </div>
        </div>
        <div class="item">
          <div class="item-title">用户id</div>
          <div class="item-value">{{ AccountData.userId }}</div>
        </div>
        <div class="item">
          <div class="item-title">昵称</div>
          <input
            type="text"
            class="item-ipt text"
            v-model="AccountData.nickName"
            @blur="monicker(AccountData.nickName)"
          />
        </div>
        <div class="item jianjie">
          <div class="item-title">简介</div>
          <input
            type="text"
            v-model="AccountData.desc"
            class="item-ipt"
            @blur="brief(AccountData.desc)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BackNav from "@/components/BackNav.vue";
export default {
  name: "mydata",
  components: {
    BackNav,
  },
  data() {
    return {
      //个人数据
      AccountData: {},
    };
  },
  created() {
    this.personal();
  },
  methods: {
    //上传背景
    uploadBg(file) {
      //

      //获取base64
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "");
      //

      //获取token
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "POST",
        url: "/updateUserBg",
        data: {
          tokenString,
          serverBase64Img: base64,
          imgType: file.file.type.split(/\//)[1],
        },
      })
        .then((res) => {
          console.log("updateUserBg ===>", res);
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);

            return;
          }

          this.$toast(res.data.msg);

          this.userImage.userBg=res.data.userBg
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //上传头像
    updateImg(file) {
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "");
      let tokenString = sessionStorage.getItem("token");
      //  let userImg = this.AccountData.userImg;
      this.axios({
        method: "POST",
        url: "/updateAvatar",
        data: {
          tokenString,
          serverBase64Img: base64,
          imgType: file.file.type.split(/\//)[1],
        },
      })
        .then((res) => {
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }
          this.$toast(res.data.msg);
        })
        .catch((err) => {});
    },
    //修改用户名
    monicker(nickName) {
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "post",
        url: "/updateNickName",
        data: {
          tokenString,
          nickName,
        },
      })
        .then((res) => {
          // console.log("昵称", res);
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);

            return;
          }
          this.$toast(res.data.msg);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改个人简介
    brief(desc) {
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "post",
        url: "/updateDesc",
        data: {
          tokenString,
          desc: desc,
        },
      })
        .then((res) => {
          // console.log("昵称", res);
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);

            return;
          }
          this.$toast(res.data.msg);

          if (this.AccountData.desc.length == 0) {
            this.AccountData.desc = "这家伙很懒,没有留下东西!";
            this.$toast("已设置默认内容");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //个人信息
    personal() {
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "GET",
        url: "/findAccountInfo",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          // console.log("个人资料", res);
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);

            return;
          }
          this.$toast(res.data.msg);
          if (res.data.code == "B001") {
            this.AccountData = res.data.result[0];
            if (this.AccountData.desc.length == 0) {
              this.AccountData.desc = "这家伙很懒,什么也没留下!";
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.mydata {
  /deep/ .van-uploader__upload {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0;
  }
  .mydata-nav-box {
    position: sticky;
    top: 0;
  }
}
.mydata-img {
  height: 160px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #e8e8e8;
}
.mydata-box {
  margin: 10px;
  padding: 10px;
  position: relative;
  top: -50px;
  background-color: #fff;
  //   background-image: linear-gradient(
  //     to bottom,
  //     rgba(255, 255, 255, 0.45) 0px,
  //     rgba(255, 255, 255, 0.45) 45px,
  //     #fff
  //   );
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.item {
  display: flex;
  padding: 15px 0;
  font-size: 16px;
  border-bottom: 1px solid #f9f9f9;
  align-items: center;
  &:last-of-type {
    border-bottom: none;
    font-size: 14px;
  }
  &:first-of-type {
    padding: 0;
  }
}
.item-value {
  margin-left: auto;
  color: #b8bab2;
}
.pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  // background-color: red;
  background-repeat: no-repeat;
  background-size: cover;
}
.item-ipt {
  margin-left: auto;
  border: none;
  color: #a1a1a2;
}
.text {
  text-align: right;
}
.mydata-conent {
  margin-top: 10px;
}
.jianjie {
  display: flex;
}
.mydata-img {
    height: 160px;
    position: relative;
    background-repeat: no-repea;
    background-position: center center;
    background-size: cover;
    background-color: #e8e8e8;
  }

  .uploader-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
</style>